<template>
  <div class="hello">
    <el-container class="page-size">
      <el-aside>

        <div class="info-title" style="" >
          <div style="height:20px;"></div>
          <a href="/index">
            <img src="./../assets/img/logo.jpg" width="50" height="50" style="border-radius: 50%; border: 0;">
          </a>
          <div><strong class="font-bold"></strong></div>
          <div style="color: #8095a8;">连锁管理后台&nbsp;v1.0</div>
        </div>
        <el-menu  background-color="#324057" :default-active="selctMenu" :active="selctMenu" :unique-opened="true" ref="elMenu" class="el-menu-vertical-demo" active-text-color="#20a0ff" text-color="#bfcbd9"  @select="selectMenu" :collapse="isCollapse">
          <el-menu-item index="index" style="padding-left: 20px !important; font-weight: 600;">
            <i class="icon icon-dianmian"></i>
            <span style="padding-left: 6px">总部首页</span>
          </el-menu-item>
          <el-submenu :index="index+''" v-for="(menu,index) in menuLink" v-hasChard>
            <template slot="title">
              <i :class="menu.icon"></i>&nbsp;
              <span slot="title">{{menu.name}}</span>
            </template>
            <el-menu-item v-for="(child,childIndex) in menu.child" :key="childIndex" :index="index+'-'+childIndex" @click="chose(child.meta.title)" v-hasPermission="child.meta.code">
              {{child.meta.title}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="white-bg exit">
            <el-row>
              <el-col :span="10" class="text-left">&nbsp;&nbsp;<el-button type="primary" size="small" @click="updateLayout" icon="el-icon-menu" ></el-button></el-col>
              <el-col :span="14" class="text-muted text-right" style="padding-right: 20px;cursor: pointer;">
                <!--<el-button type="primary" size="small" @click="showQuick=showQuick?false:true" >{{showQuick?'关闭快捷方式':"打开快捷方式"}}</el-button>-->
                <span style="padding: 3px 10px;border-right: 1px solid #a0a0a0;color: #000">消息</span>
                <el-dropdown trigger="click" style="height: 45px;padding-left: 10px;position: relative;color: #000">
                           <span class="el-dropdown-link" >
                               <!--<img src="./../assets/header.png" width="28" height="28" style="position: absolute;top: 10px">-->
                              <span ></span>欢迎您,<span v-if="account">{{account}}!</span><i class="el-icon-caret-bottom el-icon--right"></i>
                           </span>
                  <el-dropdown-menu slot="dropdown" >
                    <el-dropdown-item style="width: 200px">用户信息</el-dropdown-item>
                    <el-dropdown-item style="width: 200px"><div  @click="updatePassword">修改密码</div></el-dropdown-item>
                    <el-dropdown-item ><div @click="exitLogin">安全退出</div></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </div>
        </el-header>
        <el-main>
          <div :class="{'no-active-right-menu':!showQuick,'right-menu':showQuick}">
            <transition name="el-fade-in-linear">
              <div v-show="showQuick">
                <div class="right-menu-title">
                  快捷操作
                </div>
                <div class="right-menu-item">
                  <div class="menu-item" style="background-color:#33B8D9;height:100px">
                    <div class="center-center">
                      <div>
                        <p><i class="icon icon-chakanmingxi" style="font-size:30px"></i></p>
                        <p>原料管理</p>
                      </div>
                    </div>
                  </div>
                  <div class="menu-item" style="background-color:#33B8D9;height:100px">
                    <div class="center-center">
                      <div>
                        <p><i class="icon icon-chakanmingxi" style="font-size:30px"></i></p>
                        <p>原料管理</p>
                      </div>
                    </div>
                  </div>
                  <div class="menu-item" style="background-color:#B3C0D1;height:100px">
                    <div class="center-center">
                      <div>
                        <p><i class="icon icon-chakanmingxi" style="font-size:30px"></i></p>
                        <p>原料管理</p>
                      </div>
                    </div>
                  </div>
                  <div class="menu-item" style="background-color:#33B8D9;height:100px">
                    <div class="center-center">
                      <div>
                        <p><i class="icon icon-chakanmingxi" style="font-size:30px"></i></p>
                        <p>原料管理</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
          <div :class="{'no-show-rihgt-menu':!showQuick,'show-right-menu':showQuick}">
            <div class="page-heading noselect onlyone" >
              <el-tabs v-model="editableTabsValue2" @tab-click="tabClick" type="card" @tab-remove="removeTab">
                <el-tab-pane
                  v-for="(val, key, index) in tabs"
                  :closable="val.deleteAble"
                  :key="val.tabItem.meta.title"
                  :label="val.tabItem.meta.title"
                  :name="val.tabItem.meta.title">
                </el-tab-pane>
              </el-tabs>
            </div>
            <div>
              <router-view >   </router-view>

            </div>
          </div>
        </el-main>
        <el-footer style="height:51px">
          <div class="white-bg bottom">
            <strong style="padding-left: 10px">Copyright</strong> © 2007-2018  版权所有归属：西安秦晔信息技术有限公司
          </div>
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>

<script>
  import AllRouter from '@/router/all.router'
  import TabManager from '@/utils/TabManager'

  export default {
    //data是个函数
    data(){
      return {
        isCollapse:false,
        menuLink:AllRouter,
        tabs:{},
        account:window.localStorage.getItem("accountRealName"),
        editableTabsValue2:"",
        showQuick:false,
        selctMenu:"index", //默认选中菜单
        leftlayout:"",
        rightlayout:"",
      }
    },

    created () {
//      this.$axios.get("isLogin").then((data)=>{
//        if(!data.success){
//          return;
//        }
//      });
      if(!window.localStorage.getItem('accessToken')){
        this.router.push({path:"/login"})
        return;
      }

      console.log(">>>>>>>>>>>>>>>>>>>>>>>>>jjj");


//      $this.router.push({path:"/index"})

      var menu={};
      var menuIndex={};
      this.menuLink.forEach(item=>{
        if(item.meta){
          var child=menu[item.meta.parent.name] ||[]
          child.push(item)
          try {
            child=child.sort((a,b)=>a.meta.index-b.meta.index)
          } catch (error) {
            console.log(erro);
          }
          menu[item.meta.parent.name]=child
          menuIndex[item.meta.parent.name]=item.meta.parent.index;
        }
      })
      var menuGen=[]
      for(var p in menu){
        console.log(menu[p][0].meta);
        menuGen.push({name:p,child:menu[p],index:menuIndex[p],icon:menu[p].length>0?menu[p][0].meta.parent.icon:''});
//         try {
//           menuGen=menuGen.sort((a,b)=>a.meta.index-b.meta.index)
//           console.log(menuGen)
//         } catch (error) {
//         }
      }

      menuGen.sort((a,b)=>a.index>b.index)
//      console.log("<<<<<<<<<<<<<****")
//      console.log(menuGen)
      this.menuLink=menuGen;
      this.tabs=Object.assign({},TabManager.add({"path":"/user/table","meta":{"title":"总部首页","index":"index"}},false))
      this.selectMenu("index");

    },
    methods:{
      updatePassword(){
        this.router.push({path:"/user/updatePass"})
      },
      getData(data){
        console.log(data);
      },
      chose(item){

      },
      add(){
        var title="首页"+new Date().valueOf()
        this.tabs=Object.assign({},TabManager.add({"path":"/user","meta":{"title":title}},true))
        this.editableTabsValue2=title
      },
      selectMenu(menuIndex){
//        console.log("fffffffffff");
//        console.log(menuIndex);
        let item;
        if(menuIndex==='index'){
          item = {
            path:'/user/table',
            meta:{
              index:"index",
              title:'总部首页',
            }
          };
        }else {
          let indexList = menuIndex.split("-");
          item=JSON.parse(JSON.stringify(this.menuLink[indexList[0]].child[indexList[1]]));
        }

//        console.log(item);
        this.tabs=Object.assign({},TabManager.add(item))
        // console.log(item);
        this.router.push({path:item.path})
        this.editableTabsValue2=item.meta.title;

      },
      tabClick(item){
//        console.log("-------------tablclick")
//        console.log(item.name);
//        console.log(this.tabs);
//        console.log(this.tabs[item.name].tabItem.meta.index);
        if(this.tabs[item.name].tabItem.meta.index=='index'){
          this.selctMenu='index'
        }else{
          this.selctMenu=(this.tabs[item.name].tabItem.meta.parent.index*1-1)+"-"+(this.tabs[item.name].tabItem.meta.index*1-1)
        }
//        console.log(this.selctMenu)
        this.router.push({path:this.tabs[item.name].tabItem.path})
      },
      removeTab(item){
        if(item==this.editableTabsValue2){
          this.router.push({path:this.tabs[item].preTab.tabItem.path});
          this.tabs=Object.assign({},TabManager.remove(item))
          console.log(TabManager.current.tabItem);
          this.editableTabsValue2=TabManager.current.tabItem.meta.title;
        }else{
          this.tabs=Object.assign({},TabManager.remove(item))
        }
        if(this.tabs && this.tabs[this.editableTabsValue2]){
          this.selctMenu=(this.tabs[this.editableTabsValue2].tabItem.meta.parent.index*1-1)+"-"+(this.tabs[this.editableTabsValue2].tabItem.meta.index*1-1)
        }else {
          this.selctMenu='index'
          this.editableTabsValue2='总部首页'
          this.router.push({path:'/user/table'})
        }

      },
      // 退出登录
      exitLogin(){
        if(!confirm("您确定要退出登录?")){ return false; }
        this.$axios.get("logout").then(data=>{
          window.sessionStorage.removeItem("isLogin");
          window.localStorage.clear();

          this.router.push({path:"/login"})
        })
      },
      updateLayout(){
        this.isCollapse ? this.isCollapse=false : this.isCollapse=true
        if(this.isCollapse){
          this.left=1;
          this.right=23;
        }else{
          this.left=3;
          this.right=21;
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss"  scoped>
  .el-header, .el-footer {
    background-color: #f3f3f4;
    color: #333;
    text-align: center;
    line-height: 50px;
  }

  .el-aside {
    background-color: #324057;
    color: #333;
    width: inherit !important;
    text-align: center;
  }

  .el-main {
    background-color: #f3f3f4;
    text-align: center;
    padding: 0px;
    // overflow: hidden;
    height: 100%;
    position: relative;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .page-size{
    height: 100vh;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .history-page{
    height:50px;
    background-color: #FFF;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;  /* ul中的内容不换行 */
    list-style: none;
    text-align: left;
    padding: 0px;
    margin: 0px;
  }
  .page-item{
    display: inline-block;
    height: 100%;
    width: 100px;
    line-height: 50px;
  }
  /* for Chrome */
  .history-page::-webkit-scrollbar {
    display: none;
  }
  .left-scrollbar{
    line-height: 50px;
    background-color: #FFF;
    cursor: pointer;
  }
  .right-scrollbar{
    line-height: 50px;
    background-color: #FFF;
    cursor: pointer;
  }
  .right-menu{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100px;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    color: #FFF;
  }
  .right-menu-title{
    height: 44px;
    line-height: 44px;
  }
  .right-menu-switch{
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 11;
    width: 44px;
    line-height: 44px;
    height: 44px;
    cursor: pointer;
    background-color: red
  }
  .no-active-right-menu{
    height: 100%;
    color: #FFF;
    background-color: #FFF;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 0px;
  }
  .white-bg {
    background-color: #fff;
  }
  .bottom{
    background: none repeat scroll 0 0 white;
    border-top: 1px solid #e7eaec;
    width: 100%;
    overflow-x: hidden;
  }
  .show-right-menu{
    margin-right: 100px;
    height: 100%;
  }
  .no-show-rihgt-menu{
    height: 100%;
  }

  .info-title{
    background: #2f3c52;
    padding: 22px 18px;
  }

  .el-submenu__title{
    height: 46px;
    line-height: 46px;
    color: #a7b1c2 !important;
  }
  .el-menu-item{
    height: 40px;
    line-height: 40px;
    color: white;
  }
  .el-menu-item.is-active{
    background-color: #5a5e66 !important;
    color: white !important;
  }
  .el-submenu .el-menu-item{
    font-weight: 500 !important;
  }
  .el-menu-item:hover{
    background-color: #233645 !important;
    color: #FFF !important;
  }






</style>
